<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 页面上方工具条 -->
      <PageTools :show-before="true">
        <span slot="before">共166条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import?type=emloyee')">导入</el-button>
          <el-button size="small" type="danger" @click="exportData">导出</el-button>
          <el-button size="small" type="primary" @click="showDialog = true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 页面下方的内容 -->
      <el-card>
        <el-table :data="list" border>
          <el-table-column label="序号">
            <!-- <template slot-scope="{ $index }">{{ $index + 1 }}</template> -->
            <template slot-scope="{ $index }">
              {{ (pageSetting.page - 1) * pageSetting.size + 1 + $index }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
            sortable=""
            :formatter="formatEmployment"
          />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template slot-scope="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template slot-scope="{row}">
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="{row}">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" align="middle" style="height: 60px;">
          <el-pagination
            layout="total,sizes, prev, pager, next,jumper"
            :total="pageSetting.total"
            :page-size="pageSetting.size"
            :page-sizes="[2, 5, 10, 20]"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </el-row>
      </el-card>
      <AddEmployee :show-dialog.sync="showDialog" @addEmployee="getUserList" />
    </div>
  </div>
</template>

<script>
import { getUserList, delEmployee } from '@/api/employees'
import EmploymentEnum from '@/api/constant/employees'
import AddEmployee from './components/add-employee'
export default {
  components: {
    AddEmployee
  },
  data() {
    return {
      showDialog: false,
      list: [],
      pageSetting: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async exportData() {
      // 准备导出 excel 文件
      const excel = await import('@/vendor/Export2Excel')
      // excel.export_json_to_excel({
      //   header: tHeader, // 表头 必填
      //   data, // 具体数据 必填
      //   filename: 'excel-list', // 非必填
      //   autoWidth: true, // 非必填
      //   bookType: 'xlsx' // 非必填
      // })
      // 因为表头需要中文, 但是拿数据的时候又是英文 key 所以必须
      // 做一个枚举对应
      const headersEnum = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const header = Object.keys(headersEnum)
      // ["姓名", "手机号", "入职日期", "聘用形式", "转正日期", "工号", "部门"]
      console.log(header)

      // 获取所有的数据, 其实是根据当前的total 决定获取多少条
      const pageSetting = {
        page: 1,
        size: this.pageSetting.total
      }
      // 用引入的原 api 接口发送请求
      const { rows } = await getUserList(pageSetting)
      console.log(rows)
      // 导出前需要处理两个必要的数据
      // Header 表头
      // data 数据
    },
    async getUserList() {
      const { rows, total } = await getUserList(this.pageSetting)
      this.pageSetting.total = total
      this.list = rows
      // 临时将第一行数据隐藏掉, 避免手滑删掉管理员
      // rows.shift()
    },
    currentChange(newPage) {
      this.pageSetting.page = newPage
      this.getUserList()
    },
    sizeChange(newSize) {
      this.pageSetting.size = newSize
      this.getUserList()
    },
    formatEmployment(row, column, cellValue, index) {
      const obj = EmploymentEnum.hireType.find(item => item.id === cellValue)
      // return obj ? obj.value : '其他'
      return obj ? obj.value : '其他'
    },
    async delEmployee(id) {
      try {
        await this.$confirm('请确认删除该员工')
        await delEmployee(id)
        await this.getUserList()
        this.$message.success('成功删除员工')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
</style>
